<template>
  <div>

    <!--挂号-未就诊页面-->
    <el-row style="width:100%;margin-top:30px;border: 1px solid red">
      <!--挂号科室-->
      <el-col :span="4" :offset="0" style="">
        <span style="font-size: 15px;margin-right: 5px;">挂号科室</span>
        <el-select v-model="departmentValue" placeholder="请选择" style="width: 150px;">
          <el-option v-for="item in departmentOptions" :key="item.name" :label="item.label" :value="item.name">
          </el-option>
        </el-select>
      </el-col>

      <!--挂号医生-->
      <el-col :span="4" :offset="0" style="margin-left:20px;border: 1px solid red;">
        <span style="font-size: 15px;margin-right: 5px;">挂号医生</span>
        <el-select v-model="doctorSelect" placeholder="请选择" style="width: 150px;">
          <el-option v-for="item in doctorOptions" :key="item.name" :label="item.label" :value="item.name">
          </el-option>
        </el-select>
      </el-col>

      <!--就诊时间-->
      <el-col :span="4" :offset="0" style="margin-left:20px;border: 1px solid red;width: 440px;">
        <span style="font-size: 15px;margin-right: 5px;">就诊时间</span>
        <el-date-picker v-model="clinictimeSelect" type="daterange" align="right"
                        unlink-panels
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="clinictimeOptions" style="">
        </el-date-picker>
      </el-col>

      <!--查询框-->
      <el-col :span="7" :offset="0" style="margin-left:20px;">
        <el-input placeholder="输入患者姓名" v-model="searchValue" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="querySubmit"></el-button>
        </el-input>
      </el-col>

    </el-row>


    <el-row :gutter="0" style="margin-top:20px;border: 1px solid red">
      <el-col :span="24" :offset="0" >
        <el-table stripe :data="tableData1" :header-cell-style="{lineHeight:'20px'}" style="width: 100%"><!--height="840"-->
          <el-table-column fixed prop="prop0" label="序号"></el-table-column>
          <el-table-column prop="prop1" label="工号"></el-table-column>
          <el-table-column prop="prop2" label="员工姓名"></el-table-column>
          <el-table-column prop="prop3" label="员工性别"></el-table-column>
          <el-table-column prop="prop4" label="员工年龄"></el-table-column>
          <el-table-column prop="prop5" label="手机号码"></el-table-column>
          <el-table-column prop="prop6" label="所属科室"></el-table-column>
          <el-table-column prop="prop7" label="角色"></el-table-column>
          <el-table-column prop="prop8" label="创建时间"></el-table-column>
          <el-table-column prop="prop9" label="创建人员"></el-table-column>
          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="text" size="small">编辑</el-button>
              <el-button type="text" size="small" @click="handleClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-col>
    </el-row>

  </div>
</template>

<script>
  export default {
    name: "demo2",
    data() {
      const item = {
        prop0: 1,
        prop1: '201912090030',
        prop2: '王小虎',
        prop3: '男',
        prop4: 20,
        prop5: '15809290122',
        prop6: '全科',
        prop7: '医生',
        prop8: '2019-11-12 12:08:12',
        prop9: '王冕',
      };
      return {
        tableData1: Array(7).fill(item),

        departmentValue: '',
        departmentOptions: [{
          name: '选项1',
          label: '全部'
        }, {
          name: '选项2',
          label: '全科'
        }, {
          name: '选项3',
          label: '内科'
        }, {
          name: '选项4',
          label: '儿科'
        }],

        doctorSelect: '',
        doctorOptions: [{
          name: '选项1',
          label: '宋江'
        }, {
          name: '选项2',
          label: '韩政'
        }, {
          name: '选项3',
          label: '田立杰'
        }],

        //时间
        clinictimeSelect: '',
        clinictimeOptions: {
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 0);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '昨天',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            },
            {
              text: '最近三天',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近两周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 14);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近三周',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 21);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近一个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }, {
              text: '最近两个月',
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
                end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                picker.$emit('pick', [start, end]);
              }
            }]
        },




      }
    },
    methods: {
      handleClick(row) {
        console.log(row);
      },
      querySubmit() {
        console.log('submit!');
      },

    }
  }
</script>

<style scoped>

</style>
